<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>地点选择</title>
	<style>
		html,
		body,
		#mapPage {
			width: 100%;
			height: 100%;
			padding: 0;
			margin: 0;
		}
	</style>
  </head>
  <body>
    <iframe 
      id="mapPage" 
      width="100%" 
      height="100%" 
      frameborder=0
      src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EGJBZ-AXTKP-575D6-LYW46-QDQRS-PHF6G&referer=myapp">
    </iframe>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>
    <script type="text/javascript">
		var getUrlParam = function(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
			console.log('地址栏信息:');
			console.log(window.location.search);
			console.log(window.location.search.substr(1));
			console.log(decodeURI(window.location.search.substr(1)));
			var r = decodeURI(window.location.search.substr(1)).match(reg);
			if (r != null) return unescape(r[2]);
			return null;
		};
		
		var lat = getUrlParam('lat') || '';
		var lng = getUrlParam('lng') || '';
		lat = lat + '';
		lng = lng + '';
		console.log('获取到地理位置location：');
		console.log(lat);
		console.log(lng);
		if ((lat.length > 0) && (lng.length > 0)) {
			var $map = document.getElementById("mapPage");
			var url =
				"https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=EGJBZ-AXTKP-575D6-LYW46-QDQRS-PHF6G&referer=myapp&coord=" +
				lat + "," + lng + "&coordtype=5&radius=2000&total=10&zoom=15";
			console.log('地图地址：');
			console.log(url);
			$map.setAttribute('src', url);
		}
		
		setTimeout(function() {
			window.addEventListener('message', function (event) {
			  var loc = event.data;
			  if (loc && loc.module == 'locationPicker') {
			    console.log('location', loc);
			    uni.postMessage({
			      data: loc
			    })
			  }
			}, false);
		}, 40)
    </script>
  </body>
</html>